<template>
    <div id="change-name">
        <div id="information" class="align-center">
            <div class="top-title flex-center s-18 ">修改姓名
                <div class="close" @click="$emit('update:dialog','0')">
                    <img src="../../../../assets/img/login/close.png" alt="">
                </div>
            </div>
            <div class="align-center" style="flex:1">
                <el-form :model="changeForm" :rules="rules" ref="changeForm" hide-required-asterisk label-width="90px">
                    <el-form-item prop="fullName" label="姓名">
                        <div :class="{'error':isError}">
                            <el-input v-arouse v-model.trim="changeForm.fullName" placeholder="请输入姓名" style="margin-left:20px">
                            </el-input>
                        </div>
                    </el-form-item>
                </el-form>
                <button class="dis-button  complete-btn" type="button"  :class="!disabled?'use-btn':''" :disabled="disabled"
                    @click="submit">更换</button>
            </div>
        </div>
    </div>
</template>

<script>
import User from '@/content/api/user'
import { SqlLibUser } from '../../../../../../../static/lib/sqlite/service/SqlLibUser'
import { SqlLib } from '../../../../../../../static/lib/sqlite/SqlLib'
import {updateUserMessage} from '../../../../utils/event'
export default {
    inject:['getuser'],
    data () {
        return {
            isError: false,
            changeForm: {
                fullName: '',
            },
            rules: {
                fullName: [{ required:true,message:'请输入姓名', trigger: 'blur' }],
            }
        }
    },
    computed: {
        disabled () {
            return !this.changeForm.fullName
        }
    },
    methods: {
        submit () {
            this.$refs.changeForm.validate(async v => {
                if (v) {
                    let data = {
                        fullName: this.changeForm.fullName,
                    }
                    let res = await User.updateUser(data)
                    if (res.code === '0') {
                        let sqlib = SqlLib.getInstance(window.$DBDIR)
                        let user = SqlLibUser.queryCurrentUser(sqlib)
                        user.name = this.changeForm.fullName
                        sqlib.updateObjectById(user)
                        this.$emit('getuserInitial')
                        this.getuser()
                        this.$emit('update:dialog', '0')
                        updateUserMessage()
                        this.$message.success('更换成功')
                    }
                }
            })
        },
        focus () {
            this.isError = false
            this.$refs.changeForm.clearValidate()
        },
    }
}
</script>

<style lang="scss">
#change-name {
    #information {
        width: 600px;
        height: 240px;
        padding-bottom: 0;
        .el-input {
            margin: 0;
        }
        .el-input,
        .el-input__inner {
            width: 340px;
        }
        .close{
            img{
                cursor: pointer;
                width: 14px;
                height: 14px;
                margin-right: 10px;
            }
        }
    }
}
</style>